<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../Css/easyui.css">
    <link rel="stylesheet" type="text/css" href="../Css/icon.css">
    <link rel="stylesheet" type="text/css" href="../Css/demo.css">
    <script type="text/javascript" src="../JavaScript/jquery.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.serializeObject.js"></script>
</head>
<body>
<ul id="tt"></ul>
<form id="ff" method="post">
    <div style="margin-bottom:20px">
        <span style="margin-right:33px">ParentId</span><input  type="text" name="parentId" id="parentId" data-options="label:'ParentId'" style="width:91%">
    </div>
    <div style="margin-bottom:20px">
        <span style="margin-right:33px">EditNode</span><input  type="text" name="EditNode" id="EditNode" data-options="label:'EditNode'" style="width:91%">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'分类名称'">
    </div>
    <div style="margin-bottom:20px">
        <input class="easyui-textbox" name="type" style="width:100%" data-options="label:'类型编号'">
    </div>
</form>
<div style="text-align:center;padding:5px">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addRootNode()" style="width:80px">添加根节点</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addchildNode()" style="width:80px">添加子节点</a>
    <a href="javascript:void(0)" class ="easyui-linkbutton" onclick="removeNodes()" style="width:80px">删除节点</a>
    <a href="javascript:void(0)" class ="easyui-linkbutton" onclick="editNode()" style="width:80px">修改节点</a>
</div>
    <script type="text/javascript">
        $('#tt').tree({
            method:'get',
            url:'http://localhost:3000/cate/list/1',
            onClick(node){
                $("#parentId").val(node._id);
            }
        });
        function addchildNode(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var data = $("#ff").serializeObject();
                        $.ajax({
                            url:'http://localhost:3000/cate/data',
                            method:'post',
                            data:data
                        }).done(function(res){
                            $("#tt").tree("reload")
                        })
                    }
                }
            });
        }
        function addRootNode(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var data = $("#ff").serializeObject();
                        delete data.parentId;
                        $.ajax({
                            url:'http://localhost:3000/cate/data',
                            method:'post',
                            data:data,
                        }).done(function(res){
                            $("#tt").tree("reload")
                        })
                    }
                }
            });
        }
        function removeNodes(){
            var node = $('#tt').tree('getSelected');
            console.log(node._id);
            $.ajax({
                url:'http://localhost:3000/cate/data/' + node._id,
                method:'delete'
            }).done(function(res){
                console.log(res);
                $("#tt").tree("reload")
            })
        }
        function editNode(){
            var node = $('#tt').tree('getSelected');
            var edit = $("#EditNode").val();
            $.ajax({
                url:'http://localhost:3000/cate/data/' + node._id,
                method:'put',
                data:{title:edit},
            }).done(function(res){
                $("#tt").tree("reload")
            })
        }
    </script>
</body>
</html>